<template>
	<div class="article">
		<!-- 导航 -->
		<van-nav-bar
			title="资讯详情"
			fixed
			safe-area-inset-top
			:z-index="5"
			placeholder
			left-arrow
			left-text="返回"
			@click-left="$router.back()"
			@click-right="$router.push('/')"
		>
			<template #right>
				<van-icon name="wap-home-o" size="20" />
			</template>
		</van-nav-bar>
		<!-- 形态 -->
		<div class="type" v-if="type != '评论'">
			<!-- 头部 -->
			<div class="header">
				<h2 class="title">{{ article.title }}</h2>
				<p class="msg">
					<span>{{ article.time | formatDate }}</span>
					<span>{{ article.click }}次浏览</span>
					<span>分类：{{ article.category }}</span>
				</p>
			</div>
			<!-- 缩略图 -->
			<van-grid v-if="type == '图片'" :column-num="3" square :border="false" class="thum">
				<van-grid-item v-for="item3 in thumimages" :key="item3.src">
					<template name="icon">
						<van-image class="items" fit="contain" :src="item3.src" />
					</template>
				</van-grid-item>
			</van-grid>
			<!-- 内容 -->
			<div class="body" v-html="article.content"></div>
		</div>
		<!-- 回复评论 -->
		<h2 class="comment-title">
			提交评论
			<span style="color:#0088d1;" @click="$router.back()">返回</span>
		</h2>
		<div class="submit">
			<van-field
				v-model.trim="text"
				placeholder="请输入评论内容..."
				clearable
				type="textarea"
				class="textarea"
				show-word-limit
				maxlength="100"
			/>
			<van-button type="info" block @click="submitFn">发表</van-button>
		</div>
		<!-- 评论内容 -->
		<h2 class="comment-title">
			评论列表
			<span>{{ total }}条评论</span>
		</h2>
		<MyComment v-for="item in comments" :key="item.username" :comment="item"></MyComment>
		<van-empty v-if="comments.length == total" description="没有更多了" />
		<van-button v-else plain hairline type="danger" block @click="moreFn(false)">
			加载更多
		</van-button>
	</div>
</template>

<script>
import { getArticle, getComments, postComment, getThumimages, getImageInfo } from '@/apis/index.js';
import MyComment from '@/components/MyComment.vue';
export default {
	async created() {
		// console.log(this.$route.params.id)
		this.id = this.$route.params.id;
		this.type = this.$route.query.type;
		// 获取内容
		this.article =
			this.type == '新闻'
				? (await getArticle(this.id)).data.message[0]
				: (await getImageInfo(this.id)).data.message[0];
		// 获取评论
		this.moreFn();
		// 获取缩略图
		if (this.type == '图片') this.thumimages = (await getThumimages(this.id)).data.message;
		console.log(this.thumimages);
	},
	data() {
		return {
			article: {},
			comments: [],
			total: 0,
			pageIndex: 0,
			id: 0,
			text: '',
			type: '新闻',
			thumimages: []
		};
	},
	components: {
		MyComment
	},
	methods: {
		// 加载更多
		async moreFn(init) {
			if (!init) this.pageIndex++;
			const { data } = await getComments(this.id, this.pageIndex);
			this.comments.push(...data.message);
			this.total = data.total;
		},
		// 提交评论
		async submitFn() {
			// 安全阻断
			if (this.text === '') return this.$toast.fail('请输入评论内容');
			this.$toast.loading('提交中...');
			const result = await postComment(this.id, { content: this.text });
			console.log(result);
			// 安全阻断
			if (result.status !== 200) return this.$toast.fail(result.data.message);
			this.$toast.success(result.data.message);
			// 刷新数据
			this.text = '';
			this.moreFn(true);
		}
	}
};
</script>

<style scoped lang="less">
.type {
	margin-bottom: 50px;
}
.submit {
	padding: 10px;
	.textarea {
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 10px;
	}
}
.comment-title {
	font-size: 24px;
	font-weight: bold;
	border-bottom: 1px black solid;
	border-top: 1px black solid;
	padding-left: 10px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	span {
		font-size: 12px;
		color: #5c5c5c;
		margin-right: 30px;
	}
}
.header {
	margin-top: 10px;
	padding: 5px;
	border-bottom: 1px #ccc solid;
	.title {
		color: #0088d1;
		font-weight: bold;
		font-size: 19px;
	}
	.msg {
		margin-top: 10px;
		margin-bottom: 20px;
		span {
			margin-right: 1em;
			font-size: 12px;
			color: #999;
		}
	}
}
/deep/ .body {
	color: #5c5c5c;
	padding: 5px;
	font-size: 14px;
	line-height: 1.5;
	p {
		margin: 10px 0;
		strong,
		b {
			font-weight: bold;
		}
	}
}
</style>
